<template>
  <a-form
    ref="form"
    class="edit-room-info"
    :model="formData"
    :rules="rules"
    :label-col="{ span: 7 }"
    :wrapper-col="{ span: 16 }"
  >
    <a-form-item label="房间地址">
      <a-textarea v-model:value="formData.room_full_name" disabled></a-textarea>
    </a-form-item>
    <a-form-item label="客房数量" name="room_num" required>
      <a-input-number v-model:value="formData.room_num" style="width: 100%" />
    </a-form-item>
    <a-form-item label="最大入住人数" name="people_num_max" required>
      <a-input-number v-model:value="formData.people_num_max" style="width: 100%" />
    </a-form-item>
    <a-form-item label="房间描述" name="room_describe">
      <a-textarea v-model:value="formData.room_describe"></a-textarea>
    </a-form-item>
    <a-form-item style="text-align: right">
      <a-button type="primary" @click="onOk">确认</a-button>
      <a-button @click="onClose">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { hotelRoomDetail, updateHotelRoomDetail } from '@gis/lib/api';

export default {
  name: 'edit-room-info',
  props: {
    data: { type: Object, default: () => {} },
  },
  data() {
    return {
      formData: {
        room_full_name: '',
        room_num: undefined,
        people_num_max: undefined,
        room_describe: '',
      },
      rules: {
        room_num: [
          {
            type: 'number',
            required: true,
            message: '请输入客房数量',
            trigger: 'change',
          },
        ],
        people_num_max: [
          {
            type: 'number',
            required: true,
            message: '请输入最大入住人数',
            trigger: 'change',
          },
        ],
      },
    };
  },
  created() {
    this.getDataAsync();
  },
  methods: {
    async getDataAsync() {
      const res = await hotelRoomDetail({ room_id: this.data.room_id });
      const data = (res && res.data) || {};
      const formData = {};
      Object.keys(this.formData).forEach((key) => {
        formData[key] = data[key];
      });
      formData.room_num = data.separate_room_num;
      this.formData = formData;
    },
    getFormData() {
      return Object.assign({}, this.formData, { room_id: this.data.room_id });
    },
    onOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        let paramsData = this.getFormData();
        delete paramsData.room_full_name;
        const res = await updateHotelRoomDetail(paramsData);
        if (res.code === 200) {
          this.$message.success(res.msg || '更新成功');
          this.$emit('onSuccess');
          this.onClose();
        } else {
          this.$message.error(res.msg || '更新失败');
        }
      });
    },
    onClose() {
      this.$refs.form.resetFields();
      this.$emit('closeDialog');
    },
  },
};
</script>

<style scoped lang="less">
.edit-room-info {
  padding: 15px;
  color: #f0f0f0;
  width: 460px;
  &.ant-form {
    color: #f0f0f0;
    /deep/.ant-form-item {
      .ant-form-item-label > label {
        color: #ffffff;
      }
      .ant-input {
        color: #f0f0f0;
      }
    }
  }
}
</style>
